<template>
  <div id="bind-mobile">
    <div class="change-mobile-container">
      <el-alert type="info" title="" :closable="false">
        <h2>为什么要绑定手机？</h2>
        <p>1. 绑定手机可加强账户安全，您可以使用已绑定手机快速找回密码或支付密码。 </p>
        <p>2. 已绑定手机可用于接收账户余额变动提醒。</p>
      </el-alert>
      <el-form v-if="!bindMobile" :model="bindMobileForm" :rules="bindMobileRules" ref="bindMobileForm" label-width="160px">
        <el-form-item label="请输入手机号：" prop="mobile">
          <el-input v-model="bindMobileForm.mobile" placeholder="请输入手机号" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="图片验证码：" prop="captcha" class="img-code">
          <el-input v-model="bindMobileForm.captcha" placeholder="请输入图片验证码" clearable :maxlength="4">
            <img slot="append" :src="valid_img_url" @click="getValidImgUrl">
          </el-input>
        </el-form-item>
        <el-form-item label="请输入短信验证码：" prop="sms_code" class="sms-code">
          <el-input v-model="bindMobileForm.sms_code" placeholder="请输入短信验证码" auto-complete="off" :maxlength="6">
            <en-count-down-btn :time="60" :start="sendBindMobileSms" @end="getValidImgUrl" slot="append"/>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button @click.stop="submitBindForm">绑定</el-button>
        </el-form-item>
      </el-form>
      <div v-else class="bind-success">
        <div class="inner-success">
          <img src="../../assets/images/icon-success.png" class="icon-success">
          <div class="success-title">
            <p class="p1">您已成功绑定手机号：<span class="success-mobile">{{ bindMobile | secrecyMobile }}</span></p>
            <p class="p2">您可能需要：
              <router-link to="/member/account-safe">返回安全中心</router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as API_Safe from '@/api/safe'
import * as API_Common from '@/api/common'
import Storage from '@/utils/storage'
import { RegExp } from '~/ui-utils'

export default {
  name: 'bind-mobile',
  head() {
    return {
      title: `绑定手机号-${this.site.title}`
    }
  },
  data() {
    return {
      uuid: Storage.getItem('uuid'),
      bindMobileForm: {
        scene: 'BIND_MOBILE'
      },
      bindMobileRules: {
        mobile: [
          this.MixinRequired('请填写手机号码！'),
          {
            validator: (rule, value, callback) => {
              if (!RegExp.mobile.test(value)) {
                callback(new Error('手机格式有误！'))
              } else {
                callback()
              }
            }
          }
        ],
        captcha: [this.MixinRequired('请填写图片验证码！')],
        sms_code: [this.MixinRequired('请填写短信验证码！')]
      },
      // 图片验证码url
      valid_img_url: '',
      // 绑定成功的手机号
      bindMobile: this.$store.getters.user.mobile
    }
  },
  mounted() {
    this.$nextTick(this.getValidImgUrl)
  },
  methods: {
    /** 获取图片验证码url */
    getValidImgUrl() {
      this.valid_img_url = API_Common.getValidateCodeUrl(this.uuid, 'BIND_MOBILE')
    },
    /** 发送绑定手机验证码 */
    sendBindMobileSms() {
      return new Promise((resolve, reject) => {
        const form = this.$refs['bindMobileForm']
        form.validateField('mobile', (error1) => {
          form.validateField('captcha', (error2) => {
            if (error1 || error2) {
              reject()
              this.$message.error('表单填写有误，请检查！')
            } else {
              const { uuid } = this
              const { mobile, captcha, scene } = this.bindMobileForm
              API_Safe.sendBindMobileSms(mobile, captcha, uuid, scene).then(() => {
                this.$message.success('发送成功，请注意查收！')
                resolve()
              }).catch(() => {
                this.getValidImgUrl()
                reject()
              })
            }
          })
        })
      })
    },
    /** 绑定手机号 表单提交 */
    submitBindForm() {
      this.$refs['bindMobileForm'].validate((valid) => {
        if (valid) {
          const { mobile, sms_code } = this.bindMobileForm
          API_Safe.bindMobile(mobile, sms_code).then(() => {
            this.$message.success('绑定成功！')
            this.$store.dispatch('user/getUserDataAction')
            this.bindMobile = mobile
          }).catch(this.getValidImgUrl)
        } else {
          this.$message.error('表单填写有误，请检查！')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/color";
/deep/ .el-alert {
  h2 {
    margin: 20px 0
  }
  p {
    margin-bottom: 10px
  }
}
/deep/ .el-form {
  margin-top: 10px;
  padding-left: 24px
}
/deep/ .el-input__inner {
  width: 190px
}
/deep/ .img-code {
  .el-input {
    width: auto
  }
  .el-input-group__append {
    padding: 0;
    cursor: pointer;
    img {
      height: 38px
    }
  }
}
/deep/ .sms-code {
  .el-input {
    width: auto
  }
}
.bind-success {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 300px;
  .inner-success {
    display: flex;
    margin-top: 30px;
  }
  .icon-success {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .success-title {
    .p1 {
      font-size: 16px;
      color: #333;
      span {
        display: inline-block;
        padding: 3px 5px;
        background-color: #1E9DFF;
        color: #fff;
        border-radius: 10px;
      }
    }
    .p2 {
      font-size: 12px;
      color: #666;
      a {
        color: $color-href;
        &:hover {
          color: $color-main
        }
      }
    }
  }
}
</style>
